import React, { useEffect } from 'react';
import {
  View,
  Text,
  ScrollView,
  TouchableOpacity,
  StyleSheet,
  Image,
} from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import { Ionicons } from '@expo/vector-icons';
import { observer } from 'mobx-react-lite';
import { useNavigation } from '@react-navigation/native';
import { StackNavigationProp } from '@react-navigation/stack';
import { RootStackParamList } from '@/route/Route';
import { useStore } from '@/route/Route';

type ProfilePageNavigationProp = StackNavigationProp<
  RootStackParamList,
  'Main'
>;

export const ProfilePage = observer(() => {
  const navigation = useNavigation<ProfilePageNavigationProp>();
  const { userStore, messageStore } = useStore();

  useEffect(() => {
    userStore.fetchProfile();
    messageStore.fetchMessages();
  }, []);

  const handleNavigateToSettings = () => {
    navigation.navigate('Settings');
  };

  const handleNavigateToMessages = () => {
    navigation.navigate('MessageList');
  };

  const handleNavigateToAbout = () => {
    navigation.navigate('About');
  };

  const menuItems = [
    {
      id: '1',
      title: '车辆管理',
      icon: 'car',
      color: '#0ea5e9',
      badge: '2辆车',
      onPress: () => {},
    },
    {
      id: '2',
      title: '消息中心',
      icon: 'mail',
      color: '#10b981',
      badge:
        messageStore.unreadCount > 0
          ? `${messageStore.unreadCount}条未读`
          : undefined,
      onPress: handleNavigateToMessages,
    },
    {
      id: '3',
      title: '数据导出',
      icon: 'download',
      color: '#f59e0b',
      onPress: () => {},
    },
    {
      id: '4',
      title: '备份恢复',
      icon: 'cloud-upload',
      color: '#8b5cf6',
      onPress: () => {},
    },
    {
      id: '5',
      title: '设置',
      icon: 'settings',
      color: '#64748b',
      onPress: handleNavigateToSettings,
    },
    {
      id: '6',
      title: '关于我们',
      icon: 'information-circle',
      color: '#ef4444',
      onPress: handleNavigateToAbout,
    },
  ];

  const statistics = [
    { label: '使用天数', value: 365, unit: '天' },
    { label: '总支出', value: 12580, unit: '元' },
    { label: '记录数量', value: 156, unit: '条' },
  ];

  const user = userStore.profile;

  return (
    <SafeAreaView style={styles.container}>
      <ScrollView
        style={styles.scrollView}
        showsVerticalScrollIndicator={false}
      >
        {/* Header */}
        <View style={styles.header}>
          <Text style={styles.headerTitle}>我的</Text>
          <TouchableOpacity
            style={styles.settingsButton}
            onPress={handleNavigateToSettings}
          >
            <Ionicons name="settings" size={24} color="#64748b" />
          </TouchableOpacity>
        </View>

        {/* User Profile */}
        <View style={styles.profileCard}>
          <View style={styles.profileHeader}>
            <Image
              source={{
                uri:
                  user?.avatar ||
                  'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=150&h=150&fit=crop&crop=face',
              }}
              style={styles.avatar}
            />
            <View style={styles.profileInfo}>
              <Text style={styles.userName}>{user?.username || '用户'}</Text>
              <Text style={styles.userEmail}>
                {user?.email || 'user@example.com'}
              </Text>
              <Text style={styles.joinDate}>
                加入时间:{' '}
                {user?.createdAt
                  ? new Date(user.createdAt).toLocaleDateString()
                  : '未知'}
              </Text>
            </View>
            <TouchableOpacity style={styles.editButton}>
              <Ionicons name="pencil" size={20} color="#0ea5e9" />
            </TouchableOpacity>
          </View>
        </View>

        {/* Statistics */}
        <View style={styles.statisticsContainer}>
          {statistics.map((stat, index) => (
            <View key={index} style={styles.statisticItem}>
              <Text style={styles.statisticValue}>{stat.value}</Text>
              <Text style={styles.statisticLabel}>{stat.label}</Text>
              <Text style={styles.statisticUnit}>{stat.unit}</Text>
            </View>
          ))}
        </View>

        {/* Menu Items */}
        <View style={styles.menuSection}>
          {menuItems.map(item => (
            <TouchableOpacity
              key={item.id}
              style={styles.menuItem}
              onPress={item.onPress}
            >
              <View style={styles.menuItemLeft}>
                <View
                  style={[
                    styles.menuIcon,
                    { backgroundColor: item.color + '20' },
                  ]}
                >
                  <Ionicons
                    name={item.icon as any}
                    size={20}
                    color={item.color}
                  />
                </View>
                <Text style={styles.menuTitle}>{item.title}</Text>
              </View>
              <View style={styles.menuItemRight}>
                {item.badge && (
                  <View style={styles.badge}>
                    <Text style={styles.badgeText}>{item.badge}</Text>
                  </View>
                )}
                <Ionicons name="chevron-forward" size={20} color="#cbd5e1" />
              </View>
            </TouchableOpacity>
          ))}
        </View>

        {/* App Info */}
        <View style={styles.appInfo}>
          <Text style={styles.appName}>AutoCost</Text>
          <Text style={styles.appVersion}>版本 1.0.0</Text>
          <Text style={styles.appDescription}>专业的汽车费用管理应用</Text>
        </View>
      </ScrollView>
    </SafeAreaView>
  );
});

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#f8fafc',
  },
  scrollView: {
    flex: 1,
  },
  header: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    paddingHorizontal: 20,
    paddingVertical: 15,
    backgroundColor: '#ffffff',
  },
  headerTitle: {
    fontSize: 20,
    fontWeight: '600',
    color: '#1e293b',
  },
  settingsButton: {
    padding: 4,
  },
  profileCard: {
    margin: 20,
    backgroundColor: '#ffffff',
    padding: 20,
    borderRadius: 16,
    elevation: 2,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 1 },
    shadowOpacity: 0.05,
    shadowRadius: 2,
  },
  profileHeader: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  avatar: {
    width: 60,
    height: 60,
    borderRadius: 30,
    marginRight: 16,
  },
  profileInfo: {
    flex: 1,
  },
  userName: {
    fontSize: 18,
    fontWeight: '600',
    color: '#1e293b',
    marginBottom: 4,
  },
  userEmail: {
    fontSize: 14,
    color: '#64748b',
    marginBottom: 4,
  },
  joinDate: {
    fontSize: 12,
    color: '#94a3b8',
  },
  editButton: {
    padding: 8,
  },
  statisticsContainer: {
    flexDirection: 'row',
    marginHorizontal: 20,
    marginBottom: 20,
  },
  statisticItem: {
    flex: 1,
    backgroundColor: '#ffffff',
    padding: 16,
    marginHorizontal: 4,
    borderRadius: 12,
    alignItems: 'center',
    elevation: 1,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 1 },
    shadowOpacity: 0.05,
    shadowRadius: 1,
  },
  statisticValue: {
    fontSize: 20,
    fontWeight: '700',
    color: '#1e293b',
    marginBottom: 4,
  },
  statisticLabel: {
    fontSize: 12,
    color: '#64748b',
    marginBottom: 2,
  },
  statisticUnit: {
    fontSize: 10,
    color: '#94a3b8',
  },
  menuSection: {
    marginHorizontal: 20,
    marginBottom: 20,
    backgroundColor: '#ffffff',
    borderRadius: 16,
    overflow: 'hidden',
    elevation: 1,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 1 },
    shadowOpacity: 0.05,
    shadowRadius: 1,
  },
  menuItem: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    paddingHorizontal: 20,
    paddingVertical: 16,
    borderBottomWidth: 1,
    borderBottomColor: '#f1f5f9',
  },
  menuItemLeft: {
    flexDirection: 'row',
    alignItems: 'center',
    flex: 1,
  },
  menuIcon: {
    width: 40,
    height: 40,
    borderRadius: 20,
    alignItems: 'center',
    justifyContent: 'center',
    marginRight: 12,
  },
  menuTitle: {
    fontSize: 16,
    color: '#1e293b',
    fontWeight: '500',
  },
  menuItemRight: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  badge: {
    backgroundColor: '#ef4444',
    paddingHorizontal: 8,
    paddingVertical: 2,
    borderRadius: 10,
    marginRight: 8,
  },
  badgeText: {
    fontSize: 10,
    color: '#ffffff',
    fontWeight: '600',
  },
  appInfo: {
    alignItems: 'center',
    marginTop: 20,
    marginBottom: 40,
  },
  appName: {
    fontSize: 18,
    fontWeight: '600',
    color: '#1e293b',
    marginBottom: 4,
  },
  appVersion: {
    fontSize: 14,
    color: '#64748b',
    marginBottom: 8,
  },
  appDescription: {
    fontSize: 12,
    color: '#94a3b8',
    textAlign: 'center',
  },
});
